<template>
    <ContentBase>

        <ContentBase>
            <div class="mb-3" style="">
                <div id="uploadData">
                    <form id="form" @submit.prevent="upload" enctype="multipart/form-data">
                        <input class="form-control" id="file" type="file" name="file" ref="fileInput">
                    </form>

                </div>
            </div>
            <div class="container text-center" style="margin-bottom: 10px;">
                <p>文件信息</p>
                <div class="row">
                    <div class="col">
                        <select class="form-select" v-model="selectedCollege" @change="fetchMajors"
                            aria-label="Default select example">
                            <option value="">请选择学院</option>
                            <option v-for="college in colleges" :value="college" :key="college">{{ college }}
                            </option>
                        </select>
                        <small :class="{ 'text-danger': !selectedCollege, 'text-success': selectedCollege }">
                            {{ !selectedCollege ? '*必填' : '√' }}
                        </small>
                    </div>
                    <div class="col">
                        <select class="form-select" v-model="selectedMajor" aria-label="Default select example">
                            <option value="">请选择专业</option>
                            <option v-for="major in majors" :value="major" :key="major">{{ major }}</option>
                        </select>
                        <small :class="{ 'text-danger': !selectedMajor, 'text-success': selectedMajor }">
                            {{ !selectedMajor ? '*必填' : '√' }}
                        </small>
                    </div>
                    <div class="col">
                        <input class="form-control" type="text" v-model="subject" placeholder="请填写科目">
                        <small :class="{ 'text-danger': !subject, 'text-success': subject }">
                            {{ !subject ? '*必填' : '√' }}
                        </small>
                    </div>
                </div>
            </div>
            <div class="container text-center">
                <div class="row">
                    <div class="col">
                        <select class="form-select" aria-label="Default select example" v-model="selectedGrade">
                            <option value="">请选择适用年级</option>
                            <option value="1">大一</option>
                            <option value="2">大二</option>
                            <option value="3">大三</option>
                            <option value="4">大四</option>
                        </select>
                        <small :class="{ 'text-danger': !selectedGrade, 'text-success': selectedGrade }">
                            {{ !selectedGrade ? '*必填' : '√' }}
                        </small>
                    </div>
                    <div class="col">
                        <select class="form-select" aria-label="Default select example" v-model="selectedYear">
                            <option value="">请选择资料年份</option>
                            <option v-for="year in years" :value="year" :key="year">{{ year }}</option>
                        </select>
                        <small :class="{ 'text-danger': !selectedYear, 'text-success': selectedYear }">
                            {{ !selectedYear ? '*必填' : '√' }}
                        </small>
                    </div>
                    <div class="col">
                        <input class="form-control" type="text" placeholder="请描述文件类别" v-model="description">
                        <small style="font-size:1px" :class="{ 'text-danger': !description, 'text-success': description }">
                            {{ !description ? '*必填' : '√' }}
                        </small>
                    </div>
                    <button @click="upload">上传</button>
                </div>
            </div>
        </ContentBase>
        <ContentBase>
            <div class="container text-center">
                <div class="row">
                    <div class="col">
                        文件名
                    </div>
                    <div class="col">
                        文件大小
                    </div>
                    <div class="col">
                        上传进度
                    </div>
                </div>

            </div>
        </ContentBase>
        <ContentBase>
            <div id="form-container" class="container text-center">
            </div>

        </ContentBase>
    </ContentBase>
</template>
  
<script>
import ContentBase from '../components/ContentBase.vue';
import $ from 'jquery';
export default {
    data() {
        return {
            selectedCollege: '', // 选中的学院
            selectedMajor: '', // 选中的专业
            subject: '', // 输入的科目
            colleges: [], // 学院选项列表
            majors: [],  // 专业选项列表
            selectedGrade: '', // 选中的年级
            description: '', // 详细描述
            selectedYear: '', // 选中的年份
            startYear: 2000, // 起始年份
            endYear: 2023, // 结束年份
            years: [] // 年份选项列表
        }
    },
    components: {
        ContentBase,
    },
    mounted() {
        // 生成年份选项列表
        this.generateYearOptions();
        this.fetchColleges(); //获取学院列表
        if (localStorage.getItem("is_login") != "true") {
            var formContainer = document.getElementById('form-container');
            var formBox = document.createElement("div"); //创建展示框
            var blank = document.createElement('div'); // 创建列，专业
            blank.className = "col";
            blank.textContent = "您尚未登录，点击右上角登录/注册账户"; //写入
            formBox.append(blank);
            if (formContainer) {
                formContainer.appendChild(formBox);
            }
        }
    },
    methods: {
        upload() { //点击提交后
            //获取需要提交的信息
            const college = this.selectedCollege;
            const major = this.selectedMajor;
            const subject = this.subject;
            const grade = this.selectedGrade;
            const year = this.selectedYear;
            const description = this.description;
            if (!(college !== "" && major !== "" && subject !== "" && grade !== "" && year !== "" && description !== "")) {
                alert("文件信息中有信息未提供!");
                return;
            }
            var formData = new FormData();
            formData.append('file', this.$refs.fileInput.files[0]);
            var file = formData.get('file');
            if (localStorage.getItem("is_login") != "true") {
                alert("您尚未登录");
            }
            else if (file.size != undefined) {
                var fileName = file.name;
                var formRow = document.createElement('div'); //创建行
                formRow.className = "row";
                var filename = document.createElement('div'); // 创建列，文件名
                filename.className = "col";
                filename.textContent = fileName;
                var filesize = document.createElement('div'); // 创建列，文件大小
                filesize.className = "col";
                var fileSize = file.size;
                filesize.textContent = fileSize + "B";
                formRow.appendChild(filename);
                formRow.appendChild(filesize);

                var successMessage = document.createElement('div'); // 创建列，成功信息
                successMessage.className = "col";
                formRow.appendChild(successMessage);
                successMessage.textContent = "0%";
                var token = localStorage.getItem("token");
                console.log('college', college);
                console.log('major', major);
                console.log('subject', subject);
                console.log('grade', grade);
                console.log('year', year);
                console.log('description', description);
                formData.append('college', college);
                formData.append('major', major);
                formData.append('subject', subject);
                formData.append('grade', grade);
                formData.append('year', year);
                formData.append('description', description);

                $.ajax({
                    headers: {
                        'Authorization': 'Bearer ' + token
                    },
                    url: 'http://10.142.225.1:3000/file/upload',
                    method: 'POST',
                    processData: false,
                    contentType: false,
                    data: formData, // 发送文件数据
                    success: (e) => {
                        //console.log(e.result);
                        if (e.message == "传送成功") {
                            console.log(formData);
                            successMessage.textContent = "100%";
                            alert("上传成功!");
                        }
                        else {
                            successMessage.textContent = "失败";
                            alert(e.message);
                        }
                    },
                    error: () => {
                        successMessage.textContent = "失败";
                        alert("上传失败！");
                    }
                });
                var formContainer = document.getElementById('form-container');
                if (formContainer) {
                    formContainer.appendChild(formRow);
                }
            }
            else
                alert("您未选择文件！");
        },
        fetchColleges() {// 发起获取学院的 Ajax 请求，并更新 colleges 数据
            $.ajax({
                url: 'http://10.142.225.1:3000/college/all',
                method: 'get',
                success: (resp) => {
                    this.colleges = resp;
                },
                error: () => {
                    //alert("获取学院列表失败！");
                }
            });
        },
        fetchMajors() {
            // 发起获取专业的 Ajax 请求，并更新 majors 数据
            $.ajax({
                url: 'http://10.142.225.1:3000/major/' + this.selectedCollege,
                method: 'get',
                success: (resp) => {
                    this.majors = resp;
                },
                error: () => {
                    //alert("获取专业列表失败！");
                }
            });
        },
        generateYearOptions() {
            const years = [];
            for (let year = this.endYear; year >= this.startYear; year--) {
                years.push(year);
            }
            this.years = years;
        }
    }
};
</script>
<style scoped>
ContentBase {
    background-color: red;
}

small {
    font-size: 1%;
}

button {
    width: 100%;
    margin-top: 18px;
    background-color: lightcyan;
    outline: none;
    border-radius: 8px;
    padding: 13px;
    color: gray;
    letter-spacing: 2px;
    border: none;
    cursor: pointer;
}

button:hover {
    background-color: rgb(64, 191, 191);
    color: lightcyan;
    transition: background-color 0.5s ease;
}

.text-success {
    color: rgb(60, 220, 60);
}
</style>
  
  